<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>rendering</title>
		<link rel="stylesheet" href="css/program.css" />
		<link rel="stylesheet" type="text/css" href="css/chromagallery.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
	</head>

	<body>
		<!--头部区域-->
		<header>
			<!--插入logo-->
			<div id="logo">
				<img src="img/img1/shininglogo.png" />
			</div>
			<!--导航栏-->
			<div id="navigation">
				<a href="home.html">Home</a>
				<a href="about.html">About</a>
				<a href="rendering.html">Rendering</a>
				<a href="3DAnimation.html">3D Animation</a>
				<a href="Bin.html">Bin</a>
				<a href="contact.html">Contact</a>
			</div>
			<div id="navigationMerge">
				<img src="img/img1/nav.png" />
			</div>
		</header>
		<ul id="navigationHidden">
			<li>
				<a href="home.html">Home</a>
			</li>
			<li>
				<a href="about.html">About</a>
			</li>
			<li>
				<a href="rendering.html">Rendering</a>
			</li>
			<li>
				<a href="3DAnimation.html">3D Animation</a>
			</li>
			<li>
				<a href="Bin.html">Bin</a>
			</li>
			<li>
				<a href="contact.html">Contact</a>
			</li>
		</ul>
		<!--轮播图-->
		<div id="renderingContentWrap">
			<div id="renderingContent">
				<img src="img/img3/Banner (1).jpg" />
				<img src="img/img3/Banner (2).jpg" />
				<img src="img/img3/Banner (3).jpg" />
			</div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!--瀑布流-->
		<div id="waterFall">
			<div class="chroma-gallery mygallery">
				<img src="img/img3/1.jpg" alt="Pic1" />
				<img src="img/img3/2.jpg" alt="Pic2" />
				<img src="img/img3/3.jpg" alt="Pic3" />
				<img src="img/img3/4.jpg" alt="Pic4" />
				<img src="img/img3/5.jpg" alt="Pic5" />
				<img src="img/img3/6.jpg" alt="Pic6" />
				<img src="img/img3/7.jpg" alt="Pic7" />
				<img src="img/img3/8.jpg" alt="Pic8" />
				<img src="img/img3/9.jpg" alt="Pic9" />
				<img src="img/img3/10.jpg" alt="Pic10" />
				<img src="img/img3/11.jpg" alt="Pic11" />
				<img src="img/img3/12.jpg" alt="Pic12" />
				<img src="img/img3/13.jpg" alt="Pic13" />
				<img src="img/img3/14.jpg" alt="Pic14" />
				<img src="img/img3/15.jpg" alt="Pic15" />
				<img src="img/img3/16.jpg" alt="Pic16" />
				<img src="img/img3/17.jpg" alt="Pic17" />
				<img src="img/img3/18.jpg" alt="Pic18" />
				<img src="img/img3/19.jpg" alt="Pic19" />
				<img src="img/img3/20.jpg" alt="Pic20" />
				<img src="img/img3/21.jpg" alt="Pic21" />
				<img src="img/img3/22.jpg" alt="Pic22" />
				<img src="img/img3/23.jpg" alt="Pic23" />
				<img src="img/img3/24.jpg" alt="Pic24" />
				<img src="img/img3/25.jpg" alt="Pic25" />
				<img src="img/img3/26.jpg" alt="Pic26" />
				<img src="img/img3/27.jpg" alt="Pic27" />
				<img src="img/img3/28.jpg" alt="Pic28" />
				<img src="img/img3/29.jpg" alt="Pic29" />
				<img src="img/img3/30.jpg" alt="Pic30" />
				<img src="img/img3/31.jpg" alt="Pic31" />
				<img src="img/img3/32.jpg" alt="Pic32" />
				<img src="img/img3/33.jpg" alt="Pic33" />
				<img src="img/img3/34.jpg" alt="Pic34" />
				<img src="img/img3/35.jpg" alt="Pic35" />
				<img src="img/img3/36.jpg" alt="Pic36" />
				<img src="img/img3/37.jpg" alt="Pic37" />
				<img src="img/img3/38.jpg" alt="Pic38" />
				<img src="img/img3/39.jpg" alt="Pic39" />
				<img src="img/img3/40.jpg" alt="Pic40" />
				<img src="img/img3/41.jpg" alt="Pic41" />
				<img src="img/img3/42.jpg" alt="Pic42" />
				<img src="img/img3/43.jpg" alt="Pic43" />
				<img src="img/img3/44.jpg" alt="Pic44" />
				<img src="img/img3/45.jpg" alt="Pic45" />
				<img src="img/img3/46.jpg" alt="Pic46" />
				<img src="img/img3/47.jpg" alt="Pic47" />
				<img src="img/img3/48.jpg" alt="Pic48" />
				<img src="img/img3/49.jpg" alt="Pic49" />
			</div>
		</div>
		<footer>
			<div id="footerTop">
				<img src="img/img1/footer0.jpg" />
			</div>
			<div id="footerCenter">
				<img src="img/img1/footer1.jpg" />
				<img src="img/img1/footer2.jpg" />
				<img src="img/img1/footer3.jpg" />
				<img src="img/img1/footer4.jpg" />
			</div>
			<div id="footerBottom">
				Copyright © 1998-2015 shining Group
			</div>
		</footer>
		<a href="#" id="backTop" >
			<img src="img/img1/huojian.svg"/>
		</a>
		<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jsPicture.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/modernizr-chrg.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/imagesloaded.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/masonry.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/chromagallery.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
              $(".mygallery").chromaGallery();
			function widthChange() {
				$("#renderingContentWrap ul").css({
					top: $("#renderingContent>img").height()-50
				});
			}
			setInterval(widthChange, 100)
			$("#renderingContent>img:eq(0)").css("opacity","1") ;
			//设置一个变量记录当前的是第几张图片  图片排列要变成inline-block
			//会成为小数的排列还有那个百分比越来越小成为小数加个inline-block
			var imgIndex = 0;
			function imgChange () {
				imgIndex++;
				if (imgIndex == 3) {
					imgIndex = 0 ;
				}
				$("#renderingContent>img").css("opacity","0") ;
				$("#renderingContentWrap>ul>li").css("background-color","white") ;
				$("#renderingContentWrap>ul>li:eq(" +  imgIndex +  ")").css("background-color","skyblue") ;
				$("#renderingContent>img:eq(" +  imgIndex +  ")").css("opacity","1") ;
			}
		    var  timer = setInterval(imgChange,2000) ;
		    $("#renderingContentWrap").mouseenter(function  () {
		    	  clearInterval(timer);
		    });
		    $("#renderingContentWrap").mouseleave(function  () {
		    	  timer = setInterval(imgChange,2000) ;
		    })
		    $("#renderingContentWrap>ul>li").mouseenter(function  () {
		    	     $("#renderingContent>img").css("opacity","0") ;
				$("#renderingContentWrap>ul>li").css("background-color","white") ;
				$("#renderingContentWrap>ul>li:eq(" + $(this).index() +  ")").css("background-color","skyblue") ;
				$("#renderingContent>img:eq(" +  $(this).index() +  ")").css("opacity","1") ;
		    })
		    
     //倒数第二个界面要滚轮滑动效果是要判断滚轮的方向的方法写滑动效果
		</script>
	</body>

</html>